<template>
  <view class="indexContainer">
    <!-- 头部 -->
    <view class="header">
       <image src="/static/images/logo.png" mode="" class="logo"></image>
       <view class="search">
          <text class="iconfont icon-sousuotianchong"></text>
          <input type="text" placeholder="搜索..." placeholder-class="placeholder">
       </view>
       <button type="default">Doraemon</button>
    </view>
    <!-- 滑块 -->
    		<scroll-view class="navcroll" scroll-x="true" v-if="indexData.kingKongModule">
      <view class="navItem" :class="{ active: navIndex === -1 }" @click="changeIndex(-1,-1)" >推荐</view>
       <view class="navItem" :class="{active: navIndex === index}" 
       @click="changeIndex(index,item.L1Id)" 
       v-for="(item,index) in indexData.kingKongModule.kingKongList" 
       :key="item.L1Id">{{item.text}}</view>
    </scroll-view>
    <!-- 内容区域 -->
    <scroll-view scroll-y="true" >
       <Recommend v-if="navIndex===-1"></Recommend>
       <CateList  v-else :L1Id='L1Id'></CateList>
    </scroll-view>
    
  </view>
</template>

<script>
   import request from '../../utils/request'
   import { mapActions, mapState } from 'vuex';
   import Recommend from '../../components/Recommend/Recommend'
   import CateList from '../../components/CateList/CateList'

  export default {
     components:{
     		Recommend,
         CateList
     	},
    data() {
      return {
        navIndex:-1,
        L1Id:-1
      }
    },
   computed:{
    	// ...mapState('模块',['数据'])
    	// ...mapState('home',['indexData'])
    	...mapState({indexData:state=>state.home.indexData})
   },
    onLoad() {
       
    },
    mounted() {
       console.log(this.$store.state.home.test)
      // this.getIndexData()
      this.getIndexDataActions();

    },
    methods: {
      ...mapActions('home',['getIndexDataActions']),
       //获取首页的数据
      async getIndexData(){
         const res = await request('/getIndexData')
         // const res = await request('/api/getIndexData')//H5
         console.log(res);
         this.indexData=res.indexData
      },
      changeIndex(index,L1Id){
         // 把点击当前项的Index,赋值给导航标记
         this.navIndex=index,
         this.L1Id=L1Id;
      }
    }
  }
</script>

<style lang="stylus">
   .indexContainer
      .header
         display: flex
         padding: 10rpx 5rpx
         .logo
            width: 140rpx
            height: 40rpx
            margin 10rpx
         .search
            width: 420rpx
            height: 60rpx
            background: #f5f5f5
            position: relative
            input
               width: 360rpx
               height: 60rpx
               margin-left: 60rpx
               .placeholder
                  font-size: 26rpx
                  color: #333
            .iconfont
               position: absolute
               left: 10rpx
               top: 10rpx
               font-size: 40rpx
         button
            width: 144rpx
            height: 60rpx
            text-align: center
            font-size: 26rpx
            padding: 0 4rpx
      .navcroll
         display: flex
         height: 70rpx
         white-space: nowrap
         .navItem
            display: inline-block
            height: 40rpx
            padding: 10rpx
            font-size: 26rpx
            &.active
               color: #BB2C08
               border-bottom: 3rpx solid #BB2C08
</style>
